<!--
  文件级注释：分账协议管理页面
  - 展示分账协议列表（分页、搜索）
  - 支持新增、删除、查看详情
  规则：仅当返回值 code === 0 时认为接口调用成功
-->

<template>
  <div class="container">
    <h1>分账协议</h1>

    <!-- 搜索与新增 -->
    <div class="toolbar">
      <input v-model="query.key" class="input" placeholder="搜索协议名称" @keyup.enter="fetchList" />
      <input v-model="query.merchantId" class="input" placeholder="商户ID（可选）" @keyup.enter="fetchList" />
      <select v-model.number="query.enableStatus" class="input">
        <option :value="-1">启用状态：全部</option>
        <option :value="1">启用</option>
        <option :value="0">禁用</option>
      </select>
      <select v-model.number="query.activationStatus" class="input">
        <option :value="-1">激活状态：全部</option>
        <option :value="1">已激活</option>
        <option :value="0">未激活</option>
      </select>
      <button class="btn" @click="fetchList">查询</button>
      <div class="spacer"></div>
      <button class="btn primary" @click="openAddModal">新增协议</button>
    </div>

    <!-- 列表 -->
    <table class="table">
      <thead>
        <tr>
          <th>协议名称</th>
          <th>协议编码</th>
          <th>启用状态</th>
          <th>激活状态</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.agreementName }}</td>
          <td>{{ item.agreementCode }}</td>
          <td>{{ formatEnable(item.enableStatus) }}</td>
          <td>{{ formatActivation(item.activationStatus) }}</td>
          <td>{{ formatYMD(item.creationTime) }}</td>
          <td>
            <router-link class="link" :to="`/divided-agreements/detail/${item.id}`">详情</router-link>
            <button class="link danger" @click="onDelete(item.id)">删除</button>
          </td>
        </tr>
        <tr v-if="list.length === 0">
          <td colspan="6" class="empty">暂无数据</td>
        </tr>
      </tbody>
    </table>

    <!-- 分页 -->
    <div class="pagination">
      <button class="btn" :disabled="query.page<=1" @click="onPrev">上一页</button>
      <span>第 {{ query.page }} / {{ totalPages }} 页</span>
      <button class="btn" :disabled="query.page>=totalPages" @click="onNext">下一页</button>
    </div>

    <!-- 新增协议弹窗 -->
    <div v-if="addModal.open" class="modal">
      <div class="modal-content">
        <h3>新增分账协议</h3>
        <div class="form">
          <label>
            协议名称：
            <input v-model="addModal.form.AgreementName" class="input" placeholder="请输入协议名称" />
          </label>
          <label>
            商户ID（可选）：
            <input v-model="addModal.form.MerchantId" class="input" placeholder="按需填写商户ID" />
          </label>
          <label>
            分账周期（可选）：
            <input v-model.number="addModal.form.DividedCycle" class="input" type="number" min="1" placeholder="例如 30" />
          </label>
          <label>
            生效开始时间（可选）：
            <input v-model="addModal.form.StartTime" class="input" type="datetime-local" />
          </label>
          <label>
            生效结束时间（可选）：
            <input v-model="addModal.form.EndTime" class="input" type="datetime-local" />
          </label>
        </div>
        <div class="modal-actions">
          <button class="btn" @click="closeAddModal">取消</button>
          <button class="btn primary" @click="onAdd">确认新增</button>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { DividedService } from '../services/divided'
import { isSuccess } from '../services/types'

/**
 * 组件级注释：
 * 管理分账协议的列表展示与基础增删操作。
 */

/**
 * 查询参数
 */
const query = ref({ page: 1, limit: 10, key: '', merchantId: '', enableStatus: -1, activationStatus: -1 })
/** 列表数据 */
const list = ref<any[]>([])
/** 总条数 */
const total = ref(0)
/** 总页数 */
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / query.value.limit)))

/** 新增弹窗状态 */
const addModal = ref({
  open: false,
  form: {
    AgreementName: '',
    MerchantId: '',
    DividedCycle: undefined as number | undefined,
    StartTime: '',
    EndTime: ''
  }
})

/**
 * 函数级注释：获取协议列表
 * @returns Promise<void>
 * @throws 可能抛出网络异常
 */
async function fetchList(): Promise<void> {
  const res = await DividedService.getDividedAgreementList(
    query.value.page,
    query.value.limit,
    query.value.key,
    query.value.merchantId,
    query.value.enableStatus,
    query.value.activationStatus
  )
  if (isSuccess(res) && res.data) {
    list.value = res.data.data || []
    total.value = res.data.total || 0
  } else {
    alert(res.message || '获取分账协议列表失败')
  }
}

/**
 * 函数级注释：打开新增弹窗
 * @returns void
 */
function openAddModal(): void {
  addModal.value.open = true
}

/**
 * 函数级注释：关闭新增弹窗
 * @returns void
 */
function closeAddModal(): void {
  addModal.value.open = false
}

/**
 * 函数级注释：新增分账协议
 * @returns Promise<void>
 * @throws 可能抛出网络异常
 */
async function onAdd(): Promise<void> {
  const payload = { ...addModal.value.form }
  if (!payload.AgreementName) {
    alert('请填写协议名称')
    return
  }
  const res = await DividedService.addDividedAgreement(payload)
  if (isSuccess(res)) {
    alert('新增成功')
    closeAddModal()
    fetchList()
  } else {
    alert(res.message || '新增失败')
  }
}

/**
 * 函数级注释：删除分账协议
 * @param id 协议ID
 * @returns Promise<void>
 * @throws 可能抛出网络异常
 */
async function onDelete(id?: string): Promise<void> {
  if (!id) return
  if (!confirm('确认删除该协议吗？')) return
  const res = await DividedService.deleteDividedAgreement(id)
  if (isSuccess(res)) {
    alert('删除成功')
    fetchList()
  } else {
    alert(res.message || '删除失败')
  }
}

/**
 * 函数级注释：上一页
 */
function onPrev(): void {
  if (query.value.page > 1) {
    query.value.page--
    fetchList()
  }
}

/**
 * 函数级注释：下一页
 */
function onNext(): void {
  if (query.value.page < totalPages.value) {
    query.value.page++
    fetchList()
  }
}

/**
 * 函数级注释：格式化启用状态
 * @param s 启用状态数值
 * @returns string 可读文案
 */
function formatEnable(s?: number): string {
  if (s === 1) return '启用'
  if (s === 0) return '禁用'
  return '-'
}

/**
 * 函数级注释：格式化激活状态
 * @param s 激活状态数值
 * @returns string 可读文案
 */
function formatActivation(s?: number): string {
  if (s === 1) return '已激活'
  if (s === 0) return '未激活'
  return '-'
}

onMounted(fetchList)

/**
 * 函数级注释：格式化日期为 YYYY-MM-DD
 * @param d 日期字符串或 Date
 * @returns string 格式化后的日期；无效或为空返回 '-'
 * @throws 无显式异常（内部容错处理非法日期）
 */
function formatYMD(d?: string | Date | null): string {
  if (!d) return '-'
  const dt = typeof d === 'string' ? new Date(d) : d
  if (isNaN(dt.getTime())) return '-'
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${dt.getFullYear()}-${pad(dt.getMonth() + 1)}-${pad(dt.getDate())}`
}
</script>

<style scoped>
.container { display: grid; gap: 16px; }
.toolbar { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.input { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; }
.btn { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-secondary); cursor: pointer; }
.btn.primary { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-200); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid var(--border); padding: 10px; text-align: left; }
.link { color: var(--primary-700); background: none; border: none; cursor: pointer; margin-right: 8px; }
.link.danger { color: #d23c3c; }
.empty { text-align: center; color: var(--text-secondary); }
.pagination { display: flex; align-items: center; gap: 12px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.3); display: grid; place-items: center; }
.modal-content { width: 520px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; display: grid; gap: 12px; }
.form { display: grid; gap: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
</style>
